<template>
    <div class="continer">
        <div class="headEmpty"></div>
        <div class="head">
            <span>当前：北京</span>
            <div class="right">
                <span>切换城市</span>
                <img src="@/assets/images/dt.png" alt="">
            </div>
        </div>
        <div class="secBox" v-for="item in 3" :key="item">
            <div class="top">
                <img class="leftImg" src="@/assets/images/test2.jpg" alt="">
                <div class="rightBox">
                    <span class="kmTxt">1km</span>
                    <span class="txt1">集团总部设计中心</span>
                    <div class="msg1">
                        <img src="@/assets/images/icon1.jpg" alt="">
                        <span>营业时间：9:00 - 12:00</span>
                    </div>
                    <div class="msg1">
                        <img src="@/assets/images/icon2.jpg" alt="">
                        <span>地址：北京市朝阳区和平里和平里平里和平里</span>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <a class="left" :href="'tel:'+4006600598">
                    <img src="@/assets/images/icon3.jpg" alt="">
                    <span>400-6600-598</span>
                </a>
                <!-- <div class="right">预约到店</div> -->
            </div>
        </div>
        <!-- 底部 -->
        <empty-tabbar></empty-tabbar>
        <tabbar></tabbar>
    </div>
</template>
<script>
import Tabbar from '@/pages/home/components/Tabbar'
import emptyTabbar from '@/pages/home/components/emptyTabbar'
export default {
    name: 'neighbouring',
    components: {
        Tabbar,emptyTabbar
    }
}
</script>
<style lang="stylus" scoped>
.continer
    display flex
    align-items center
    flex-direction column
    .headEmpty
        height 100px
    .head
        width 100%
        height 90px
        display flex
        align-items center
        justify-content space-between
        font-size 22px
        color #ce0021
        position fixed
        box-sizing border-box
        padding 0 53px 
        top 0
        left 0
        background #ffffff
        z-index 1
        .right
            img 
                width 32px
                height 34px
                margin-left 24px
        
    .secBox
        width 700px
        display flex
        flex-direction column
        align-items center
        border-radius 10px
        box-shadow 0 0 10px 2px #f4f4f4
        color #333333
        margin-bottom 20px
        overflow hidden
        padding-top 20px
        .top
            width 100%
            height 202px
            box-sizing border-box
            padding-left 30px
            display flex
            margin-bottom 20px
            .leftImg
                width 250px
                height 202px
                margin-right 22px
            .rightBox
                flex 1
                height 202px
                display flex
                flex-direction column
                justify-content center
                position relative
                .txt1
                    line-height 26px
                    font-size 26px
                    font-weight bold
                    margin-bottom 30px
                    letter-spacing 1px
                .msg1
                    height 32px
                    line-height 32px
                    font-size 22px
                    color #666666
                    display flex
                    align-items center
                    margin-top 10px
                    img 
                        width 26px
                        height auto
                        margin-right 12px
                    span 
                        max-width 350px
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                .kmTxt
                    position absolute
                    right 20px
                    top 20px
                    display inline-block
                    font-size 22px
                    color #666666
        .bottom
            width 100%
            height 80px
            line-height 80px
            display flex
            a
                color #333333
            .left
                width 100%
                height 80px
                display flex
                align-items center
                justify-content center
                background #eeeeee
                font-size 28px
                img 
                    width 30px
                    height 30px
                    margin-right 10px
            // .right
            //     width 50%
            //     height 80px
            //     line-height 80px
            //     text-align center
            //     background #ce0021
            //     color #ffffff
</style>
